@import '@/lib/reset.scss';

.BaseHeader{
    @include rect(1200px, 90px);
    border-bottom: 1px solid #f2f2f2;
    margin: 0 auto;
    .logo{
        float: left;
        display: block;
        margin: 0 54px;
        @include rect(90px, 89px);
    }
    ul{
        float: left;
        li{
            float: left;
            a{
                display: block;
                @include text-color(#000);
                @include background-color(#fff);
                @include font-size(18px);
                padding: 31px 18px 31px 18px;
                &:hover{
                    @include text-color(#31c27c);
                }
            }
        }
    }
    .active{
        @include text-color(#fff);
        @include background-color(#31c27c);
        &:hover{
            @include text-color(#fff);
        }
    }
    .seek{
        @include rect(218px, 36px);
        border: 1px solid #c9c9c9;
        border-radius: 5px;
        margin: 26px 23px 0 58px;
        float: left;
        input{
            @include rect(174px, 14px);
            @include font-size(14px);
            border: 0;
            margin: 10px 6px 0 10px;
            float: left;
        }
        button{
            @include rect(16px, 16px);
            @include font-size(18px);
            cursor: pointer;
            border: 0;
            margin: 4px 0 0 0;
            float: left;
            background: 0;
        }
    }
    .user-small{
        margin-top: 34px;
        @include font-size(16px);
        float: left;
        .user-login-btn{
            cursor: pointer;
            &:hover{
                @include text-color(#31c27c);
            }
        }
        // &:hover .quit{
        //     display: block;
        // }
        // .quit{
        //     display: none;
        //     position: fixed;
        //     top: 90px;
        //     right: 200px;
        //     width: 100px;
        //     height: 100px;
        //     background: #2dad6f;
        //     color: #fff;
        // }
    }
    .pay{
        @include rect(110px, 38px);
        @include font-size(14px);
        @include text-color(#fff);
        cursor: pointer;
        line-height: 38px;
        background: #31c27c;
        border: 0;
        border-radius: 3px;
        margin: 24px 10px 0 23px;
        &:hover{
            background: #2dad6f;
        }
    }
    .pay2{
        @include rect(83px, 38px);
        @include font-size(14px);
        cursor: pointer;
        line-height: 38px;
        background: 0;
        border: 1px solid #c9c9c9;
        border-radius: 3px;
        margin-top: 24px;
        &:hover{
            background: #eee;
        }
    }
    .shadow{
        @include rect(100%, 100%);
        background: rgba(0,0,0,0.3);
        position: fixed;
        top: 0;
        left: 0;
        display: none;
        z-index: 50;
        .vessel{
            @include rect(562px, 412px);
            background: #fff;
            margin: 200px auto;
            box-shadow: 0 0 10px rgba(0,0,0,.3);
            border-radius: 5px;
            border: 1px solid #ccc;
            overflow: hidden;
            position: relative;
            .login{
                display: block;
                position: absolute;
                .login-text{
                    @include rect(562px, 56px);
                    @include font-size(16px);
                    border-bottom: 1px solid #ddd;
                    margin-bottom: 5px;
                    .login-p1{
                        float: left;
                        @include rect(120px, 56px);
                        @include margin(0 0 0 225px);
                        @include line-height(56px);
                        @include text-color(#31c27c);
                    }
                    .login-p2{
                        float: right;
                        cursor: pointer;
                        @include font-size(18px);
                        @include margin(6px 6px 0 0);
                    }
                }
                .login-input{
                    @include rect(272px, 270px);
                    @include margin(40px auto 0);
                    .log-inp-tips1{
                        margin-top: 20px;
                    }
                    .log-inp-tips2{
                        margin: 25px 0;
                    }
                    .log-inp-tips3{
                        height: 40px;
                        @include font-size(18px);
                        @include background-color(#31c27c);
                        border: #31c27c;
                    }
                }
                .AutoLogin{
                    @include margin(10px 0 0 15px);
                    float: left;
                }
                .login-p3{
                    float: right;
                    @include margin(10px 15px 0 10px);
                    cursor: pointer;
                    line-height: 16px;
                    span{
                        display: block;
                        float: right;
                        @include text-color(#31c27c);
                        margin-left: 4px;
                        transform: rotate(180deg);
                    }
                }
            }
            .register{
                display: block;
                position: absolute;
                left: 562px;
                .register-text{
                    @include rect(562px, 56px);
                    @include font-size(16px);
                    border-bottom: 1px solid #ddd;
                    margin-bottom: 5px;
                    .register-p1{
                        float: left;
                        @include rect(120px, 56px);
                        @include margin(0 0 0 232px);
                        @include line-height(56px);
                        @include text-color(#31c27c);
                    }
                    .register-p2{
                        float: right;
                        cursor: pointer;
                        @include font-size(18px);
                        @include margin(6px 6px 0 0);
                    }
                }
                .register-input{
                    @include rect(272px, 270px);
                    @include margin(40px auto 0);
                    .reg-inp-tips1{
                        margin-top: 0px;
                    }
                    .reg-inp-tips2{
                        margin: 25px 0;
                    }
                    .reg-inp-tips3{
                        margin-bottom: 25px;
                    }
                    .reg-inp-tips4{
                        height: 40px;
                        @include font-size(18px);
                        @include background-color(#31c27c);
                        border: #31c27c;
                    }
                }
                .register-p3{
                    @include margin(10px 0 0 15px);
                    float: left;
                    cursor: pointer;
                    span{
                        @include text-color(#31c27c);
                        margin-right: 4px;
                    }
                }
            }
        }
    }
}